<template>
  <div class="table_con">
    <tableComponents
      :isShow="false"
      @toAdd="dialogFormVisible = true"
      :isHaveExport="false"
      :isHavePagination="false"
    >
      <template v-slot:table>
        <el-table :data="data" style="width: 100%;margin-bottom: 20px;" border row-key="id">
          <el-table-column label="分类名称" min-width="200">
            <template slot-scope="scope">
              <div class="tree_yiji">
                {{scope.row.title}}
                <div class="three_title">{{scope.row.three}}级栏目(下属分类{{scope.row.length}}个)</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="排序" sortable :sort-method="sorta" align="center" width="80">
            <template slot-scope="scope">
              <div>
                <el-input
                  @change="sortNew(scope.$index,scope.row)"
                  v-enterNumber
                  v-model="scope.row.sort"
                  autocomplete="off"
                  size="small"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否显示" min-width="100" align="center">
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.show"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="已开启"
                inactive-text="已关闭"
                active-value="1"
                @change="gethandSwitch($event,scope.row.id)"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="头部显示" min-width="100" align="center">
            <template slot-scope="scope">
              <el-switch
                v-if="scope.row.three=='一'"
                class="zdySwith"
                :width="82"
                v-model="scope.row.show_top"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="已开启"
                inactive-text="已关闭"
                active-value="1"
                @change="gethandSwitch1($event,scope.row.id)"
                inactive-value="0"
              ></el-switch>
              <span v-else>无</span>
            </template>
          </el-table-column>

          <el-table-column label="创建时间" min-width="100" align="center">
            <template slot-scope="scope">{{scope.row.created_time | getTimeFormat}}</template>
          </el-table-column>

          <el-table-column label="操作" min-width="100" align="center">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                @click="updateMenuLi(scope.row)"
              >编辑</el-button>
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="deleteMenu(scope.row.id)"
                type="danger"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      title="添加栏目"
      :close-on-click-modal="false"
      width="800px"
      @close="closeDio"
      :visible.sync="dialogFormVisible"
      class="tl size_13"
    >
      <el-form :model="ruleForm" center :rules="rules" ref="ruleForm" :label-width="formLabelWidth">
        <el-form-item label="栏目标题" prop="title">
          <el-col :span="12">
            <el-input v-model="ruleForm.title" autocomplete="off" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="上级栏目">
          <el-col :span="12">
            <el-cascader
              :options="data"
              :props="optionProps"
              :show-all-levels="false"
              v-model="op"
              size="small"
              change-on-select
              style="width:100%"
              :placeholder="placeText"
              clearable
              @change="changeMenu"
            ></el-cascader>
          </el-col>
        </el-form-item>
        <el-form-item label="图标样式">
          <el-col :span="12">
            <el-input v-model="ruleForm.piclink" autocomplete="off" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="链接地址">
          <el-col :span="12">
            <el-input v-model="ruleForm.url" placeholder="请输入栏目地址" autocomplete="off" size="small"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="详情地址">
          <el-col :span="12">
            <el-input
              v-model="ruleForm.url_details"
              placeholder="请输入详情页地址"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="$store.state.isLoading"
            type="primary"
            @click="addMenu('ruleForm')"
            size="mini"
          >立即提交</el-button>
          <el-button
            :loading="$store.state.isLoading"
            @click="dialogFormVisible = false"
            size="mini"
          >取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import tableTree from "../currency/tableThree";
import menuForm from "@/components/currency/menuMessageBox.vue";
import HeadTitle from "@/components/currency/HeadTitle.vue";
export default {
  data() {
    return {
      columns: [
        {
          text: "分类名称",
          dataIndex: "title"
        },
        {
          text: "url",
          dataIndex: "url"
        },
        {
          text: "显隐操作",
          dataIndex: ""
        },
        {
          text: "是否显示",
          dataIndex: "show"
        }
      ],
      data: this.$store.state.menuList,
      show: false,
      xy_down: 0,
      xy_down_text: "全部隐藏",
      objj: "",
      hackReset: true,
      add: "",
      dialogFormVisible: false,
      ruleForm: {
        title: "",
        parent_id: "0",
        url: "",
        piclink: "",
        url_details: ""
      },
      rules: {
        title: [{ required: true, message: "请输入栏目标题", trigger: "blur" }]
      },
      piclinks: "",
      formLabelWidth: "120px",
      op: [],
      placeText: "添加上级栏目,不选择默认为一级",
      optionProps: {
        value: "id",
        label: "title",
        children: "z"
      },
      ex: []
    };
  },

  computed: {
    getMenuList() {
      return this.$store.state.menuList;
    }
  },
  watch: {
    getMenuList(obj) {
      this.data = obj;
    }
  },
  created(){
    // console.log(this.data)
  },
  methods: {
    sorta(a, b) {
      return b - a;
    },
    sortNew(index, row) {
      var params = {};
      params.id = row.id;
      params.sort = row.sort;
      this.$api.getMenu.menuSortInput(params).then(res => {
        if (res.data.code == 200) {
          this.$store.dispatch("getMenu");
        }
      });
    },
    getEx(arr) {
      this.ex = arr;
    },
    closeDio() {
      this.dialogFormVisible = false;
      this.ruleForm = {
        title: "",
        parent_id: "0",
        url: "",
        piclink: ""
      };
      this.op = [];
    },
    deleteMenu(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思"
      }).then(willDelete => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getMenu.deleteMenu(data).then(res => {
            if (res.status == 200 && res.data.code == 400) {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            } else if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.$store.dispatch("getMenu");
              //刷新页面。。。
            } else {
              this.$swal("删除失败！", "出错啦！", "success");
            }
          });
        }
      });
    },
    updateMenuLi(row) {
      this.dialogFormVisible = true;
      this.$api.getMenu.updateMenu({ id: row.id }).then(res => {
        if (res.data.code == 200) {
          this.ruleForm = res.data.result;
          this.op = res.data.result.up_id.split("@");
        }
      });
    },
    getSortData(da) {
      this.$api.getMenu.menuSort(da).then(res => {
        this.$store.dispatch("getMenu");
      });
    },
    toggle() {
      this.xy_down += 1;
      if (this.xy_down % 2 == 0) {
        this.xy_down_text = "全部隐藏";
      } else {
        this.xy_down_text = "全部显示";
      }
    },
    gethandSwitch(e, id) {
      var params = {};
      params.id = id;
      params.show = e;
      this.$api.getMenu.isShowMenu(params).then(res => {
        if (res.data.code !== 200) {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    gethandSwitch1(e, id) {
      var params = {};
      params.id = id;
      params.show_top = e;
      this.$api.getMenu.changeMenuHead(params).then(res => {
        if (res.data.code == 200) {
          this.$store.dispatch("getMenu");
        }
        if (res.data.code !== 200) {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    addMenu(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false;
          var params = {};
          this.ruleForm.parent_id = this.ruleForm.parent_id || 0;
          params = this.ruleForm;
          if (params.id) {
            this.$api.getMenu.updateMenuSave(params).then(res => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
                this.$store.dispatch("getMenu");
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          } else {
            this.$api.getMenu.addMenuList(params).then(res => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$store.dispatch("getMenu");
                this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        } else {
          this.$message.error("请补充完整信息！");
          return false;
        }
      });
    },
    changeMenu(val) {
      this.ruleForm.parent_id = val[val.length - 1];
    }
  },
  components: {
    tableTree,
    menuForm,
    HeadTitle
  }
};
</script>

